﻿@section head{
    <style>
        .ele5 {
            /*border: 1px solid #ccc;*/
            overflow-y: hidden;
            overflow-x: hidden;
            display: inline-block;
            height: calc(100vh - 50px);
            /*height:500px;*/
            /*width: 100%;*/
            /*position: absolute;*/
            /*margin-left:-16px;*/
            top: 100%;
            background-color: #fff;
            z-index: 9999;
        }

        .layui-card-body .layui-form-item {
            margin-bottom: 0px;
        }

        .layui-inline button {
            margin-right: 5px;
        }

        .layui-form-item .layui-input-inline {
            width: 200px;
            margin-right: 5px;
        }

        .layui-form-item .layui-inline {
            margin-right: 0;
        }

        @@media screen and (max-width:768px) {
            .layui-form-item .layui-input-inline {
                width: auto;
                margin-left: 5px;
            }

            .layui-inline button {
                margin-top: 5px;
            }
        }
    </style>
}
@section body {
    <div class="layui-row layui-col-space15">
        @*左边表格*@
        <div class="layui-col-md3 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="demoTree2" class="dtree ele5" lay-filter="data5" data-id="0"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="filter-form" id="form1">
                            <div class="layui-form-item">
                                <div class="layui-form-item layui-inline">
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <input type="text" id="userName" name="userName" placeholder="用户" class="layui-input">
                                            <input type="text" id="Remark" name="Remark" placeholder="备注" class="layui-hide">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <button type="button" class="pear-btn pear-btn-md pear-btn-primary" data-type="reload" id="btnSearch">
                                            <i class="layui-icon layui-icon-search"></i>
                                            查询
                                        </button>
                                        @if (ViewBag.CoreDeptUserNew)
                                        {
                                            <button type="button" class="pear-btn pear-btn-md pear-btn-primary" data-type="addUser">添加用户</button>
                                        }

                                        @if (ViewBag.CoreDeptUserDelete)
                                        {
                                            <button type="button" class="pear-btn pear-btn-md pear-btn-danger" data-type="deleteUser">移除用户</button>
                                        }
                                        <button type="reset" class="pear-btn pear-btn-md">
                                            <i class="layui-icon layui-icon-refresh"></i>
                                            重置
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    <table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="switchTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" disabled name="Enabled" value="{{d.Gender}}" lay-skin="switch" lay-text="男|女" lay-filter="sexDemo" {{ d.Gender == '男' ? 'checked' : '' }}>
    </script>

    <script type="text/html" id="checkboxTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" name="lock" disabled value="{{d.Enabled}}" title="可用" lay-filter="lockDemo" {{ d.Enabled == true ? 'checked' : '' }}>
    </script>
}
@section script {
    <script>

        var $;
        layui.use(['table', 'view', 'dtree', 'common'], function () {
            var table = layui.table
                , form = layui.form
                , view = layui.view;
            $ = layui.$;
            var dtree = layui.dtree;
            let common = layui.common;

            var checkRow;

            var DemoTree2;
            if (!DemoTree2) {
                //layui风格数据格式
                DemoTree2 = dtree.render({
                    elem: "#demoTree2",
                    method: "post",
                    //url: '../layuiadmin/json/dtree/demoTree3.json',
                    url: '/Admin/GetDeptListJson',
                    initLevel: 4,//默认展开层级，当该值大于level时，则会展开树的节点，直到不大于当前待展开节点的level
                    dataStyle: "layuiStyle",  //使用layui风格的数据格式
                    dataFormat: "list",  //配置data的风格为list
                    response: { message: "msg", statusCode: 0, treeId: "ID", parentId: "ParentID", title: "Name" },  //修改response中返回数据的定义
                    //checkbar: true //开启复选框
                    request: {
                        __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value

                    },
                    done: function (data, obj) {
                        dtree.click(DemoTree2, "19")//点击nodeId为19节点
                    }

                });
            }



            // 点击节点触发回调，其中obj内包含丰富的数据，打开浏览器F12查看！
            dtree.on("node('demoTree2')", function (obj) {
                //layer.msg(JSON.stringify(obj.param));
                // console.log(obj.param.nodeId); // 点击当前节点传递的参数
                //console.log(obj.dom); // 当前节点的jquery对象
                //console.log(obj.childParams); // 当前节点的所有子节点参数
                //console.log(obj.parentParam); // 当前节点的父节点参数
                //alert(obj.param.nodeId)
                checkRow = obj.param.nodeId//记录选中的ID
                tableLoad();
            });
            //checkRow = obj.ID//记录选中的ID
            //定义tableLoad渲染右边的表格，曲线救国，加载完成后回调时，传第一个值重载右边的表
            function tableLoad() {
                var demoReload = $('#userName');//条件
                //方法级渲染
                table.render({
                    elem: '#test-table-reload'
                    , url: 'GetDeptUserJSON'//数据接口
                    , toolbar: false
                    , defaultToolbar: ['filter']  //工具栏名称对象['filter', 'print', 'exports']
                    , autoSort: false //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
                    , page: true//开启分页
                    , limit: 10
                    , limits: [10, 20, 50, 100]
                    , method: "post"
                    , height: 'full-125' //高度最大化减去差值
                    , even: false   //若不开启隔行背景，不设置该参数即可true/false
                    , where: {
                        key: demoReload.val(),
                        deptID: checkRow,
                        __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value

                    }
                    , cols: [[
                        { type: 'numbers' }
                        , { checkbox: true }
                        , { field: 'ID', width: 60, title: '序号' }
                        , { field: 'Name', width: 100, title: '用户名' }
                        , { field: 'ChineseName', width: 100, title: '中文名', sort: true }
                        , { field: 'Enabled', width: 120, title: '状态', templet: '#checkboxTpl' }
                        , { field: 'Gender', title: '性别', width: 100, templet: '#switchTpl' }
                        , { field: 'Email', width: 180, title: 'Email', sort: true }
                        , { field: 'Remark', width: 0, title: '备注', sort: true }//width:0代表占据所有列宽
                    ]]

                });

            }

            $('.layui-inline .pear-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            var active = {
                reload: function () {
                    var demoReload = $('#userName');
                    //执行重载
                    table.reload('test-table-reload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            key: demoReload.val(),
                            deptID: checkRow,
                            __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value
                        }
                    });
                },
                addUser: function () {
                    top.layer.open({
                        type: 2,
                        resize: false,
                        title: ['部门添加用户', 'font-size:14px;'],
                        content: '/Admin/DeptUserNew?deptID=' + checkRow,
                        area: common.isModile() ? ['95%', '95%'] : ['1000px', '500px'],
                    });
                },
                deleteUser: function () {
                    var checkStatus = table.checkStatus('test-table-reload')
                        , data = checkStatus.data; //获取选中的数据
                    //遍历ID，放到数组中
                    var UserIDs = new Array();
                    for (var i = 0; i < data.length; i++) {
                        UserIDs[i] = data[i].ID
                    }

                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        //请求登入接口
                        view.req({
                            url: 'DeleteDeptUserId' //实际使用请改成服务端真实接口
                            , data: { deletedUserIDs: UserIDs, deptID: checkRow, __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                            , type: "post"
                            , dataType: "json"
                            , done: function (res) {
                                if (res.codeIndex == 1) {
                                    layer.msg(res.msg, {
                                        offset: '15px'
                                        , icon: 1
                                        , time: 1000
                                    });
                                    btnSearchClick();//刷新
                                } else {
                                    layer.msg(res.msg, {
                                        offset: 't',
                                        anim: 6
                                    });
                                }

                            }
                        });
                    }
                },
            };

        });
        document.onkeydown = function (e) {
            if (!e) e = window.event;
            if ((e.keyCode || e.which) == 13) {
                // 查找你要判断的文本框
                var myInput = document.getElementById('userName');
                if (myInput == document.activeElement) {
                    //获得焦点后查询
                    btnSearchClick();
                }

            }
        }
        //查询事件
        function btnSearchClick() {
            document.getElementById("btnSearch").click();
        }
    </script>
}
